<template>
	<view>
		<view class="">
			<view class="shouji d-flex">
				<image src="@/static/img/login/shoujihao.png" mode="widthFix" class="image">
				</image>
				<input class="uni-input" maxlength="11" type="number" placeholder="请输入手机号" v-model="username"
					@focus="Focus" @blur="Blur" />
			</view>
			<view class=" d-flex shouji">
				<image src="@/static/img/login/yanzhengma.png" mode="widthFix" class="image">
				</image>
				<input class="uni-input" maxlength="10" type="number" placeholder="请输入验证码" v-model="code" @focus="Focus"
					@blur="Blur" />
				<text class="text3" @tap="Code">获取验证码</text>
			</view>
			<view class=" d-flex shouji">
				<image src="@/static/img/login/mimashezhi.png" mode="widthFix" class="image">
				</image>
				<input class="uni-input " :password="showPassword" type="number" placeholder="请输入密码" v-model="password"
					@focus="Focus" @blur="Blur" />
				<image class="pawicon" :src="showPassword== true ? eve:eve_avtion" mode="widthFix"
					@tap="changePassword"></image>
			</view>
			<view class=" d-flex shouji">
				<image src="@/static/img/login/mimashezhi.png" mode="widthFix" class="image">
				</image>
				<input class="uni-input " :password="showPassword" type="number" placeholder="请再次输入密码"
					v-model="passwords" @focus="Focus" @blur="Blur" />
				<!-- <image class="pawicon" :src="showPassword== true ? eve.eve_two:eve_avtion.eav_two" mode="widthFix"
					@tap="changePassword"></image> -->
			</view>
			<view class="" @tap="Gologin">
				<button class="btn" :style="{'background-color':backgroundColor}">确定</button>
			</view>
		</view>
		<view class="ml-4 mt-2 ls2">
			<view class="">如何设置可靠的密码？</view>
			<view class="fs28 gray ml-1">
				<view>1. 密码长度为6位数以上</view>
				<view>2.密码中包含数宇、字母和特殊字符</view>
				<view>3.加入1-2个大写字母</view>
				<view>4.不使用一些连续的重复的宇母和数宇</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				password: '',
				passwords: '',
				username: '',
				code: '',
				showPassword: true,
				eve: "/static/img/login/biyan.png",
				eve_avtion: "/static/img/login/zhengyan.png",
				backgroundColor: '#ce0a08',
			}
		},

		computed: {
			...mapState(['hasLogin', 'userInfo']),

		},


		methods: {
			...mapMutations(['login', 'logout']),
			changePassword() {
				this.showPassword = !this.showPassword
			},
			Focus() {
				this.backgroundColor = "#e80909"
			},
			Blur() {
				this.backgroundColor = "#ce0a08"
			},
			async Code() {
				if (!(this.username.length > 0)) {
					uni.showToast({
						title: '手机号不能为空',
						icon: "none"
					})
					return
				}
				if (!(/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(this
						.username))) {
					uni.showToast({
						title: '手机号错误',
						icon: "none"
					})
					return
				}
				let Code = await this.$myRequest({
					url: '/getCode/' + this.username
				})
				uni.showToast({
					title: '发送成功',
					icon: "none"
				})
			},
			async Gologin() {
				if (this.password != this.passwords) {
					uni.showToast({
						title: '两次密码不一致',
						icon: "none"
					})
					return
				}

				let reg = await this.$myRequest({
					url: '/reset_pwd',
					methods: 'POST',
					data: {
						mobile: this.username,
						code: this.code,
						password: this.password,

					},
				})
				// if (reg.data.status == 1) {
				// let token = reg.data.token;
				// console.log(token)
				// uni.setStorageSync('token', token)
				// this.Login(token)
				// }

				this.$api.msg('修改成功！');
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/login/login'
					})
				}, 1000)
			},
			async Login(token) {
				let UIfo = await this.$myRequest({
					url: '/getUserInfo',
					methods: 'POST',
					data: {
						token: token
					}
				})
				if (UIfo.data.status == 1) {
					let userInfo = UIfo.data.data

					this.login(userInfo)
					uni.showToast({
						title: '登陆成功',
						icon: "none"
					})
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.uni-input {
		padding-left: 15rpx;
		padding-top: -10rpx;
		letter-spacing: 2rpx;
		width: 50%;
		flex: 1;
	}

	.shouji {
		background-color: #f4f4f4;
		margin: 20rpx 45rpx 30rpx 45rpx;
		height: 40rpx;
		padding: 30rpx;
		border-radius: 80rpx;
	}

	.pawicon {
		width: 30rpx;
		height: 20rpx;
		margin-left: 150rpx;
		margin-right: 20rpx;
		margin-top: 10rpx;
	}

	.paw {
		color: #999;
		font-size: 28rpx;
	}

	.btn {
		color: white;
		background-color: #e80909;
		border-radius: 50rpx;
		margin: 50rpx 40rpx 0 40rpx;
	}

	.text {
		color: #999;
		margin-left: -20rpx;
		margin-top: 30rpx;
		margin-left: 50rpx;
	}

	.text3 {
		color: white;
		font-size: 28rpx;
		letter-spacing: 2rpx;
		background-color: #f88b0d;
		border-radius: 10rpx;
		height: 30rpx;
		line-height: 30rpx;
		padding: 10rpx;
		align-self: center;
		margin-right: 10rpx;
	}

	.image {
		width: 35rpx;
		height: 40rpx;
		margin-top: 5rpx;
	}
</style>
